TNotes.electron

Appearance

0037. 使用 ipcRenderer.send、ipcMain.on 实现从渲染进程到主进程的单向 IPC 通信

0037. 使用 ipcRenderer.send、ipcMain.on 实现从渲染进程到主进程的单向 IPC 通信 ​

📚 相关资源

1. 📝 概述 ​

  • 通过一个简单的 demo 来了解 ipcRenderer.send、ipcMain.on 的一种基本用法。

2. 💻 demos.1 - 使用 ipcRenderer.send、ipcMain.on 实现从渲染进程到主进程的单向 IPC 通信 ​

js
const { app, BrowserWindow, ipcMain } = require('electron')

let win
function createWindow() {
  win = new BrowserWindow({
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  })

  win.webContents.openDevTools()

  win.loadFile('./index.html')
}

function handleIPC() {
  ipcMain.on('message-from-renderer', (event, ...args) => {
    console.log('主进程收到了来自渲染进程的消息')
    console.log('渲染进程在发送 message-from-renderer 请求时，传递的参数如下：')
    console.log(...args)
  })
}

app.on('ready', () => {
  createWindow()
  handleIPC()
})
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>24.02.24</title>
  </head>
  <body>
    <h1>renderer process</h1>
    <button id="btn">ipcRenderer.send('message-from-renderer', 1, 2, 3)</button>
    <script>
      const { ipcRenderer } = require('electron')
      document.getElementById('btn').addEventListener('click', () => {
        console.log(
          '按钮被点击了，向主进程发起 message-from-renderer 请求，并传入请求参数 1、2、3'
        )
        ipcRenderer.send('message-from-renderer', 1, 2, 3)
      })
    </script>
  </body>
</html>
  • 最终效果
    • 渲染进程使用 ipcRenderer.send 发送消息给主进程，主进程通过 ipcMain.on 对渲染进程发送过来的消息进行监听，实现【渲染进程】到【主进程】的【单向 IPC 通信】。
    • 图 0

Discussions